<template>
	<view v-if="loading || error" class="loading_view">
		<u-loading mode="circle" v-if="loading" size="50"></u-loading>
		<u-toast ref="uToast" />
		<view class="messgae">{{ loading?'加载中...':'加载失败' }}</view>
	</view>
	<view v-else  style="background-color: #EFEFEF;height: 100vh;overflow: auto;">
		<u-toast ref="uToast" />
		<view class="form_view">
			
			<view class="item_view">
				
				<view class="label_view">姓　　名:</view>
				<view class="input_view"><input v-model="formData.u_name" placeholder="请输入您的姓名" type="text"/></view>
				
			</view>
			
			<view class="item_view">
				<view class="label_view">证件类型:</view>
				<view class="input_view">
					<view @click="show=true" style="color: rgb(128,128,128);width: 500rpx;">{{ typeName!=''?typeName:'请点击选择证件类型' }}</view>
					<u-select @confirm="changeType" v-model="show" confirm-color="#EA4389" :list="list"></u-select>
				</view>
			</view>
			
			<view class="item_view">
				
				<view class="label_view">证件号码:</view>
				<view class="input_view"><input v-model="formData.u_number" placeholder="请输入证件号码" type="text"/></view>
				
			</view>
			
		</view>
		
		<view class="teaching_box">
			<view class="title">证件照片：</view>
			<view class="photo_box">
				<view class="photo_view" @click="upload(1)">
					
					<view class="upload_loading" v-if="loadings[1]">
						<u-loading mode="circle"></u-loading>
						<view class="message">上传中...</view>
					</view>
					<image v-if="formData.u_holdPhoto==''" src="https://wx.jianmeijiayuan.com/static/image/hold_id.png"></image>
					<image v-else :src="formData.u_holdPhoto"></image>
					<view class="message_view">点击上传手持照片</view>
				</view>
				
				<view class="photo_view" @click="upload(2)">
					<view class="upload_loading" v-if="loadings[2]">
						<u-loading mode="circle"></u-loading>
						<view class="message">上传中...</view>
					</view>
					<image v-if="formData.u_backPhoto==''" src="https://wx.jianmeijiayuan.com/static/image/back_id.png"></image>
					<image v-else :src="formData.u_backPhoto"></image>
					<view class="message_view">点击上传反面证件照</view>
				</view>
				
				<view class="photo_view" @click="upload(3)">
					<view class="upload_loading" v-if="loadings[3]">
						<u-loading mode="circle"></u-loading>
						<view class="message">上传中...</view>
					</view>
					<image v-if="formData.u_positivePhoto==''" src="https://wx.jianmeijiayuan.com/static/image/just_id.png"></image>
					<image v-else :src="formData.u_positivePhoto"></image>
					<view class="message_view">点击上传正面证件照</view>
				</view>
			</view>
		</view>
		
		<view class="teaching_box" v-if="status_show">
			<view class="title">状态：
				<text v-if="formData.u_status==-1" style="color:#FF9800;">审核拒绝</text>
				<text v-else-if="formData.u_status==-0" style="color:#FF9800;">待审核</text>
				<text v-else style="color: #1AA034;">审核通过</text>
			</view>
			<view class="title" v-if="formData.u_status==-1">拒绝原因：{{ formData.u_refuseMessage }}</view>
		</view>
		
		<view class="teaching_box">
			<view class="title">注意事项：</view>
			<view class="content">
				参考上方照片，证件照需<text>清晰可识别</text>,不可倾斜过多，手持照务必<text>右手轻持横在胸前</text>。港澳台用户直接输入括号内的英文或数字即可
			</view>
		</view>
		
		<view style="height: 120rpx;"></view>
		
		<view class="foot_btn" v-if="formData.u_status!=1" @click="submit">{{ sub_status?'提交中...':'提交审核' }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				error:false,
				status_show:false,
				typeName:'',
				formData:{
					u_name:'',
					u_number:'',
					u_type:0,
					// 手持证件号码
					u_holdPhoto:'',
					// 正面证件照片
					u_positivePhoto:'',
					// 反面证件号码
					u_backPhoto:'',
					u_status:0
				},
				show:false,
				list: [
					{
						value: '1',
						label: '中国大陆身份证'
					},
					{
						value: '2',
						label: '港澳台身份证'
					},
					{
						value: '3',
						label: '军官证'
					}
				],
				loadings:{
					1:false,
					2:false,
					3:false
				},
				sub_status:false
			}
		},
		methods: {
			getData(){
				let that = this
				that.loading=true
				that.error=false
				this.$request({
					url:'/user/realName',
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								
								if(res.data.data){
									that.formData = res.data.data
									
									that.status_show = true
									
									if(that.formData.u_type==1){
										that.typeName='中国大陆身份证'
									}else if(that.formData.u_type==2){
										that.typeName='港澳台身份证'
									}else if(that.formData.u_type==3){
										that.typeName='军官证'
									}
								}
								
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
								that.error=true
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
							that.error=true
						}
					},
					fail(){
						that.$refs.uToast.show({
							title: '数据获取失败~',
							type: 'warning'
						})
						that.error=true
					},
					complete(){
						that.loading=false
					}
				})
			},
			changeType(data){
				this.formData.u_type = data[0].value
				
				this.typeName = data[0].label
			},
			upload(type=1){
				let that = this
				
				if(this.loadings[type]){
					return false
				}
				
				
				uni.chooseImage({
				    success: (chooseImageRes) => {
						this.loadings[type]=true
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        var uper = uni.uploadFile({
				            url: that.$upload, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								this.loadings[type]=false
				                let data = JSON.parse(uploadFileRes.data)
								
								if(data.code==1){
									if(type==1){
										this.formData.u_holdPhoto = data.src
									}else if(type==2){
										this.formData.u_backPhoto = data.src
									}else{
										this.formData.u_positivePhoto = data.src
									}
								}else{
									
									this.$refs.uToast.show({
										title: res.data.msg,
										type: 'error'
									})
									
								}
								
				            },
							fail(){
								
								this.$refs.uToast.show({
									title: '上传失败',
									type: 'error'
								})
								
								this.loadings[type]=false
							}
				        });
						
						uper.onProgressUpdate(function(res){
							// 进度条等于 上传到的进度
							// _self.percent = res.progress
							// console.log('上传进度' + res.progress)
							// console.log('已经上传的数据长度' + res.totalBytesSent)
							// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
						})
						
				    }
				});
				
			},
			submit(){
				
				if(this.status_show){
					
					/* this.$refs.uToast.show({
						title: '',
						type: 'waring'
					})
					
					return false */
				}
				
				if(this.sub_status){
					return false
				}
					
				if(this.formData.u_name==''){
					this.$refs.uToast.show({
						title: '请输入您的姓名~',
						type: 'waring'
					})
					
					return false
				}
				
				if(this.formData.u_type==0){
					this.$refs.uToast.show({
						title: '请选择您的证件类型',
						type: 'waring'
					})
					
					return false
				}
				
				if(this.formData.u_number==0){
					this.$refs.uToast.show({
						title: '请输入您的证件号码',
						type: 'waring'
					})
					
					return false
				}
				
				if(this.formData.u_holdPhoto==''){
					this.$refs.uToast.show({
						title: '请上传您手持证件照',
						type: 'waring'
					})
					
					return false
				}
				
				if(this.formData.u_positivePhoto==''){
					this.$refs.uToast.show({
						title: '请上传您正面证件照片',
						type: 'waring'
					})
					
					return false
				}
				
			
				if(this.formData.u_backPhoto==''){
					this.$refs.uToast.show({
						title: '请上传您反面证件照片',
						type: 'waring'
					})
					
					return false
				}
				this.sub_status = true
				let that = this
				this.$request({
					url:'/user/realName_save',
					data:this.formData,
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								that.$refs.uToast.show({
									title: '提交成功',
									type: 'success',
									url:'/pages/my_prove/my_prove'
								})
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'error'
							})
						}
					},
					fail(err){
						that.$refs.uToast.show({
							title: '数据提交失败~',
							type: 'error'
						})
					},
					complete(){
						this.sub_status = false
					}
				})
			}
		},
		onLoad(){
			this.getData()
		}
	}
</script>

<style scoped>
	.foot_btn{
		background-color: #EA4389;
		color:#fff;
		width: 750rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		position: fixed;
		left:0;
		bottom: 0;
	}
	.form_view{
		width:750rpx;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		margin-top: 30rpx;
	}
	.form_view .item_view{
		width:750rpx;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		align-items: center;
	}
	.form_view .item_view .label_view{
		padding:0 30rpx;
	}
	.form_view .item_view .input_view input{
		font-size: 24rpx;
		width: 550rpx;
	}
	.teaching_box{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.teaching_box view.title{
		width: 670rpx;
		font-size: 32rpx;
		padding: 40rpx 0;
	}
	.photo_box{
		width:670rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.photo_box image{
		width:310rpx;
		height: 200rpx;
	}
	.photo_box view.photo_view{
		margin-top: 20rpx;
		position: relative;
	}
	.photo_box view.photo_view .upload_loading{
		width:310rpx;
		height: 210rpx;
		background-color: rgba(255,255,255,0.8);
		position: absolute;
		left:0;
		top:0;
		z-index:1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.photo_box view.photo_view .upload_loading .message{
		color:#888;
		margin-top: 15rpx;
	}
	.photo_box view.photo_view .message_view{
		width: 310rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #2B2B2B;
		color:#fff;
		font-size: 20rpx;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.teaching_box view.content{
		width: 670rpx;
		font-size: 26rpx;
		color:#888;
		text-indent: 52rpx;
		line-height: 40rpx;
	}
	.teaching_box view.content text{
		color:#EA4389;
	}
</style>
